import React, { SyntheticEvent, useState } from 'react';
import { Socket } from 'socket.io';

interface IProps {
  socket: Socket;
}

const NewMessage = ({ socket }: IProps) => {
  const [value, setValue] = useState('');
  const submitForm = (e: SyntheticEvent) => {
    e.preventDefault();
    setValue('');

    socket.emit('message', value);
  };

  return (
    <form onSubmit={submitForm}>
      <input
        autoFocus
        value={value}
        onChange={(e: SyntheticEvent<HTMLInputElement>) => {
          setValue(e.currentTarget.value);
        }}
      />
    </form>
  );
};

export default NewMessage;
